<template>
  <!-- 左边三个功能复杂组件 -->
  <SearchView :mapInstance="mapInstance" :receivecityName="receivecityName" />
  <CityWeatherView
    :mapInstance="mapInstance"
    @updateCityName="updateCityName"
  />
  <!-- 右边部分 一个组件 -->
  <MapToolView :mapInstance="mapInstance" :receivecityName="receivecityName" />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import CityWeatherView from './components/CityWeatherView.vue'

import SearchView from './components/SearchView.vue'
import MapToolView from './components/MapToolView.vue'

import AMapLoader from '@amap/amap-jsapi-loader'

// 地图实例
let AMap = null
let map = ref(null)
const mapInstance = ref({
  map: map.value,
  AMap: AMap,
})

//城市名称
const receivecityName = ref('')

const updateCityName = (cityName) => {
  //console.log('updateCityName', cityName)
  receivecityName.value = cityName
}

onMounted(async () => {
  //加载地图
  window._AMapSecurityConfig = {
    securityJsCode: '3dbffaaa0bf93fd0d52877370106c84c',
  }
  AMap = await AMapLoader.load({
    key: '523bdb4c0b46ca03cb2ef3e1174e641a', //申请好的 Web 端开发者 Key，首次调用 load 时必填
    version: '2.0', //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
    plugins: [
      'AMap.ToolBar',
      'AMap.Scale',
      'AMap.HawkEye',
      'AMap.MapType',
      'AMap.Geolocation',
      'AMap.ControlBar',
      'AMap.Geocoder',
      'AMap.MouseToo',
      'AMap.Weather',
      'AMap.CitySearch',
      'AMap.DistrictSearch',
      'AMap.Geocoder',
      'AMap.DragRoute',
      'AMap.Driving',
      'AMap.Transfer',
      'AMap.Walking',
    ], //需要使用的插件列表，如比例尺'AMap.Scale'
  })
  map.value = new AMap.Map('container', {
    viewMode: '3D',
    zoom: 9,
    center: [113.25, 23.15],
  })

  //添加控件
  //缩放控件
  map.value.addControl(
    new AMap.ToolBar({
      position: { bottom: '40px', right: '50px' },
    })
  )
  //比例尺
  map.value.addControl(new AMap.Scale())
  //添加定位控件
  map.value.addControl(
    new AMap.Geolocation({
      position: { bottom: '110px', right: '50px' },
    })
  )
  //添加控制罗盘控件
  map.value.addControl(
    new AMap.ControlBar({
      position: { bottom: '145px', right: '20px' },
      showZoomBar: true, // 显示缩放按钮
      showControlButton: true, // 显示 3D/2D 切换和全屏按钮
    })
  )
  //更新mapInstance
  mapInstance.value = {
    map: map.value,
    AMap: AMap,
  }
})
</script>

<style scoped>
.amap-control.amap-controlba {
  width: 50px;
  height: 50px;
}
</style>
